<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/company/aa">公司介绍1</router-link>
    <router-link to="/company/bb">公司介绍2</router-link>

    <router-view></router-view>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>

let routes = [
    {
        path:"/home",
        //局部导航守卫
        beforeEnter:(to,from,next) =>{
            console.log("/home路由的局部导航守卫");
            next();
        },
        component:() => Promise.resolve({
            template:`<h1>首页的内容</h1>`,

                //路由进入之前  组件导航守卫
                beforeRouteEnter(to,from,next){
                    console.log("/home组件导航守卫 进入到产品详情的路由");
                    console.log(this);   //undefined  
                    next();
                },
                //路由更新的时候
                beforeRouteUpdate(to,from,next){
                    console.log("/home组件导航守卫 路由更新的时候");
                    console.log(this);
                    next();
                },
                //路由离开的时候
                beforeRouteLeave(to,from,next){
                    console.log("/home组件导航守卫 路由离开的时候");
                    console.log(this);
                    next();
                }
        })
    },
    {
        path:"/company/:name",
        //局部导航守卫
        beforeEnter:(to,from,next) =>{
            console.log("/company路由的局部导航守卫");
            next();
        },
        component:() => import('./hot.js')
    }
]
let router = new VueRouter({
    routes
})

//全局前置导航守卫
router.beforeEach((to, from, next) => {
    console.log("全局前置导航守卫");
    next();
    
})


let vm = new Vue({
    el:"#app",
    router
})

</script>

</body>
</html>